<script setup lang="ts">
import { computed, unref } from 'vue'
import { isNullOrUnDef } from '@/utils/is'
import { template } from 'lodash-es'

const props = defineProps({
  model: {
    type: Object,
    default: () => ({})
  },
  field: {
    type: String,
    default: ''
  },
  keys: {
    type: Array<any>,
    default: () => []
  },
  eval: {
    type: String,
    default: ''
  }
})

const tempStr = unref(props.eval)
const keys = unref(props.keys)
const model = unref(props.model)

const results = computed(() => {
  if (tempStr && keys.every((k) => !isNullOrUnDef(model[k]))) {
    try {
      const compiled = template(tempStr)
      return compiled(model)
    } catch (e) {
      return props?.model?.[props.field]
    }
  }
  return props?.model?.[props.field]
})
</script>

<template>
  <div class="text-show">{{ results }}</div>
</template>

<style scoped lang="less">
.text-show {
  line-height: 22px;
  white-space: pre-line;
}
</style>
